<template>
  <div id="client">
    <p style="margin-left: 5px">
      <el-input
        style="width: 200px; margin-left: 10px; margin-right: 20px"
        placeholder="单据编号/源单号/物流单号"
        v-model="input"
        clearable
      >
      </el-input>
      &nbsp;&nbsp;&nbsp; 日期：
      <el-date-picker
        v-model="value2"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
      >
      </el-date-picker
      >&nbsp;&nbsp;&nbsp;
      <el-select v-model="value" placeholder="服务类型">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option> </el-select
      >&nbsp;&nbsp;&nbsp;
      <el-select v-model="value" placeholder="物流状态">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option> </el-select
      >&nbsp;<el-button type="primary">查询</el-button>
    </p>
    <p style="margin-left: 5px; margin-top: 20px">
      物流公司<el-input
        style="width: 200px; margin-left: 10px; margin-right: 20px"
        placeholder="请选择"
        v-model="input"
        clearable
      ></el-input>
      <el-button
        style="margin-left: -20px; margin-right: 10px"
        @click="dialogFormVisible = true"
        >...</el-button
      >
      &nbsp;&nbsp;&nbsp; 源单类型：
      <el-select v-model="value" placeholder="源单类型">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </p>
    <el-divider></el-divider>
    <div style="margin-bottom: 20px; margin-right: 40px; float: right">
      <el-button type="primary" @click="goto('Logistics')">新增</el-button
      >&nbsp;&nbsp;&nbsp;
      <el-button type="success">审核</el-button>&nbsp;&nbsp;&nbsp;
      <el-button type="warning">反审核</el-button>&nbsp;&nbsp;&nbsp;
      <el-button type="danger">删除</el-button>
    </div>
    <el-table
      height="400px"
      :data="tableData"
      border
      style="width: 100%; font-size: 13px"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="date" label="单据日期" width="120">
      </el-table-column>
      <el-table-column prop="id" label="单据编号" width="120">
      </el-table-column>
      <el-table-column prop="initId" label="关联源单号" width="120">
      </el-table-column>
      <el-table-column prop="his" label="客户/供应商" width="120"
        >+
      </el-table-column>
      <el-table-column prop="type" label="源单类型" width="120">
      </el-table-column>
      <el-table-column prop="service" label="服务类型" width="120">
      </el-table-column>
      <el-table-column prop="status" label="物流单状态" width="120">
      </el-table-column>
      <el-table-column prop="num" label="发货数量" width="120">
      </el-table-column>
      <el-table-column prop="jname" label="寄件人姓名" width="120">
      </el-table-column>
      <el-table-column prop="jphone" label="寄件人电话" width="120">
      </el-table-column>
      <el-table-column prop="jaddress" label="寄件人地址" width="120">
      </el-table-column>
      <el-table-column prop="sname" label="收件人姓名" width="120">
      </el-table-column>
      <el-table-column prop="sphone" label="收件人电话" width="120">
      </el-table-column>
      <el-table-column prop="saddress" label="收件人地址" width="120">
      </el-table-column>
      <el-table-column prop="yfee" label="运费" width="120"> </el-table-column>
      <el-table-column prop="wname" label="物品名称" width="120">
      </el-table-column>
      <el-table-column prop="wstatus" label="物流状态" width="120">
      </el-table-column>
      <el-table-column prop="wcompany" label="物流/快递公司" width="120">
      </el-table-column>
      <el-table-column prop="wid" label="物流/快递单号" width="120">
      </el-table-column>
      <el-table-column prop="doman" label="制单人" width="120">
      </el-table-column>
      <el-table-column prop="dodate" label="制单时间" width="120">
      </el-table-column>
      <el-table-column prop="jiaohuo" label="交货方式" width="120">
      </el-table-column>
      <el-table-column prop="text" label="备注" width="120"> </el-table-column>
      <el-table-column label="操作" fixed width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看</el-button
          >
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="position: relative; left: 700px; top: 10px; right: 50px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
    >
    </el-pagination>
    <el-dialog top="20px" title="新增客户" :visible.sync="dialogFormVisible">
      <AddClient />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <div style="height: 20px; clear: both"></div>
    <el-dialog top="20px" title="添加业务员" :visible.sync="dialogFormVisible">
      <el-input
        v-model="input"
        placeholder="请输入编号或名称"
        style="width: 200px; margin-left: 20px"
      ></el-input>
      <el-checkbox v-model="checked" style="margin-left: 20px"
        >显示禁用职员</el-checkbox
      >
      <el-button type="primary" style="margin-left: 20px">查询</el-button>
      <el-table :data="gridData">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          width="100"
          property="name"
          label="类别"
        ></el-table-column>
        <el-table-column
          width="100"
          property="address"
          label="编号"
        ></el-table-column>
        <el-table-column
          width="300"
          property="address"
          label="名称"
        ></el-table-column>
        <el-table-column
          width="100"
          property="address"
          label="联系人"
        ></el-table-column>
        <el-table-column
          width="100"
          property="address"
          label="手机"
        ></el-table-column>
        <el-table-column
          width="100"
          property="address"
          label="备注"
        ></el-table-column>
      </el-table>
      <div class="block">
        <span class="demonstration"></span>
        <el-pagination layout="prev, pager, next" :total="1000">
        </el-pagination>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "LogisticsList",
  data() {
    return {
      tableData: [
        {
          date: "2024-01-01",
          id: "001",
          initId: "I001",
          his: "客户A",
          type: "采购单",
          service: "普通服务",
          status: "已发货",
          num: "10",
          jname: "张三",
          jphone: "12345678901",
          jaddress: "北京市朝阳区",
          sname: "李四",
          sphone: "09876543210",
          saddress: "上海市浦东新区",
          yfee: "50",
          wname: "电子产品",
          wstatus: "在途中",
          wcompany: "顺丰快递",
          wid: "SF123456789",
          doman: "王五",
          dodate: "2024-01-02 10:00",
          jiaohuo: "快递",
          text: "请尽快发货",
        },
        {
          date: "2024-01-02",
          id: "002",
          initId: "I002",
          his: "供应商B",
          type: "销售单",
          service: "加急服务",
          status: "待发货",
          num: "15",
          jname: "赵六",
          jphone: "11223344556",
          jaddress: "广州市天河区",
          sname: "钱七",
          sphone: "55667788990",
          saddress: "深圳市南山区",
          yfee: "30",
          wname: "日用品",
          wstatus: "待揽收",
          wcompany: "圆通快递",
          wid: "YT112233445",
          doman: "孙八",
          dodate: "2024-01-03 14:00",
          jiaohuo: "自提",
          text: "注意包装完整",
        },
        {
          date: "2024-01-03",
          id: "003",
          initId: "I003",
          his: "客户C",
          type: "采购单",
          service: "普通服务",
          status: "已发货",
          num: "8",
          jname: "周九",
          jphone: "99887766554",
          jaddress: "成都市武侯区",
          sname: "吴十",
          sphone: "44433221100",
          saddress: "杭州市西湖区",
          yfee: "40",
          wname: "食品",
          wstatus: "在途中",
          wcompany: "中通快递",
          wid: "ZT123456789",
          doman: "郑十一",
          dodate: "2024-01-04 09:00",
          jiaohuo: "快递",
          text: "请检查商品质量",
        },
        {
          date: "2024-01-04",
          id: "004",
          initId: "I004",
          his: "供应商D",
          type: "销售单",
          service: "加急服务",
          status: "待发货",
          num: "12",
          jname: "王十二",
          jphone: "12333445566",
          jaddress: "西安市碑林区",
          sname: "冯十三",
          sphone: "66554433221",
          saddress: "苏州市姑苏区",
          yfee: "60",
          wname: "化妆品",
          wstatus: "待揽收",
          wcompany: "申通快递",
          wid: "ST123456789",
          doman: "陈十四",
          dodate: "2024-01-05 11:00",
          jiaohuo: "自提",
          text: "请提供发票",
        },
        {
          date: "2024-01-05",
          id: "005",
          initId: "I005",
          his: "客户E",
          type: "采购单",
          service: "普通服务",
          status: "已发货",
          num: "20",
          jname: "褚十五",
          jphone: "77889900112",
          jaddress: "重庆市渝中区",
          sname: "卫十六",
          sphone: "33445566778",
          saddress: "南京市玄武区",
          yfee: "50",
          wname: "图书",
          wstatus: "在途中",
          wcompany: "韵达快递",
          wid: "YD123456789",
          doman: "蒋十七",
          dodate: "2024-01-06 15:00",
          jiaohuo: "快递",
          text: "请优先配送",
        },
      ],
      dialogFormVisible: false,
    };
  },
  methods: {
    goto(to) {
      if (this.$route.path !== "/" + to) {
        this.$router.push(to);
      }
    },
  },
};
</script>

<style scoped>
.el-button el-button--default el-popover__reference {
  margin-right: 20px;
}

tr {
  border: 1px solid black;
}
</style>